<template>
  <div class="layout">
    <!-- 某某酒楼 -->
    <div>
      <!-- 左侧菜系选择 -->
      <div class="menu">
        <ul>
          <li v-for="(v, k) in menuDataList" :key="k">
            <router-link :to='{path:"order", query:{id:v.id}}'>{{ v.name }}</router-link>
            <span>{{ v.count }}</span>
          </li>
        </ul>
      </div>
      <!-- 右侧菜品展示 -->
      <div class="main">
        <p>菜品</p>
        <ul>
          <li v-for="(v, k) in dishesDataList" :key="k">
            <img :src="v.img" width=100 height=100/>
            <div class="info">
              <label>{{ v.name }}</label>
              <label>月售{{ v.volume }}| 好评度{{ v.comment }}</label>
              <label>
                <b>￥{{ v.price }}</b>
                <div class="choose">
                  <a :class="{'acvite': v.count <= 0}" v-if="v.count === 0">-</a>
                  <a @click="addToEdit(v, 2)" v-else>-</a>
                  <span>{{ v.count }}</span>
                  <a @click="addToEdit(v)">+</a>
                </div>
              </label>
            </div>
          </li>
        </ul>
      </div>
      <!-- 合计 -->
      <div class="total">共{{ orderNum }}份，￥{{ countPrice }}</div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'


export default {
  data() {
    return {
      menuDataList: [],
      orderNum: 0,
      countPrice: 0,
      dishesDataList: [],
      display:false,
    }
  },
  watch: {
    "menuDataList": {
      handler(curr, old) {
        this.orderNum = curr.reduce((c, o) => c + o.count, 0)
        this.countPrice = curr.reduce((c, o) => c + o.price, 0)
      }
    },
    "$route":{
      handler(curr) {
        this.getDishes(curr.query.id)
      }
    }
  },
  methods: {
    getMenuList() {
      request.request({
        url: 'data/cuisine'
      }).then(res => {
        this.menuDataList = res
        this.$store.dispatch('GETMENUDATALIST', res)
      }).catch(err => {
        console.log(err)
      })
    },
    // 菜品
    getDishes(id = 1) {
      request.request({
        url: 'data/cuisine/' + id
      }).then(res => {
        // console.log(res)
        this.dishesDataList = res;
      }).catch(err => {
        console.log(err)
      })
    },
    addToEdit(data, type = 1) {
      request.request({
        url: 'data/cuisine/increment',
        method: 'PUT',
        data: {
          id: data.id,
          pid: data.pid,
          type,
        }
      }).then(res=>{
        this.getDishes(this.$route.query.id)
        this.getMenuList()
      })
    }
  },
  mounted() {
    // console.log('123', this.$store.state.menuDataList)
    this.getMenuList()
    this.getDishes()
  }
}

</script>

<style>
@import '../assets/css/order.css';

.acvite {
  background: #e9e9e9!important;
  cursor:not-allowed;
}
</style>


